<template>
  <div class="main-page">
    <PageSearch :search-form-config="searchFormConfig" :form-data.sync="formData" @searchBtnClick="handleSearch" />
    <el-row type="flex" justify="end">
      <el-button type="primary" icon="el-icon-plus" size="medium" @click="handleCreateGoods">
        新增
      </el-button>
    </el-row>
    <PageContent ref="pageContent" :form-data="formData" :content-table-config="contentConfig">
      <template #attachment="scope">
        <el-button size="mini" type="primary" plain @click="goUrl(scope.row.attachmentUrl)">
          {{ scope.row.attachmentName }}
        </el-button>
      </template>
      <template #operate="{ row }">
        <el-button type="text" size="small" icon="el-icon-share" @click="handleShare(row, 2)">
          渠道分享
        </el-button>
        <el-button type="text" size="small" icon="el-icon-share" class="delete-btn" @click="handleShare(row, 1)">
          镜像分享
        </el-button>
        <el-button type="text" size="small" icon="el-icon-edit" class="delete-btn" @click="handleEdit(row)">
          编辑
        </el-button>
        <el-button type="text" size="small" icon="el-icon-delete" @click="handleDelete(row)">
          删除
        </el-button>
      </template>
    </PageContent>

    <ImagesInfo ref="goodsInfo" :init-params="initParams" :channel-list="channelList" :show.sync="dialogVisible" :btn-loading="btnLoading">
    </ImagesInfo>
  </div>
</template>

<script>
import { contentConfig } from "./config/content.config";
import { searchFormConfig } from "./config/search.config";
import { modalFormConfig } from "./config/modal.config";
import ImagesInfo from "./imagesInfo.vue";
import { fetchImageEdit, fetchImageDelete } from '@/api/images'
import { fetchChannelGetList } from "@/api/trafficPrice";
export default {
  name: "OrderList",
  components: {
    ImagesInfo,
  },
  data() {
    return {
      contentConfig,
      searchFormConfig,
      modalFormConfig,
      btnLoading: false,
      confirmBtnLoading: false,
      dialogVisible: false,
      formData: {}, // 搜索表单数据
      initParams: {},
      channelList: [],
    };
  },
  computed: {
    getPicUrl() {
      return (data) => {
        return JSON.parse(data)[0]?.absolutePath;
      };
    },
    getPicUrlList() {
      return (data) => {
        const arr = JSON.parse(data);
        if (Array.isArray(arr)) {
          return arr.map((item) => item.absolutePath);
        }
      };
    },
  },
  watch: {
    dialogVisible(val) {
      if (!val) {
        this.$refs.goodsInfo.fileList = [];
      }
    },
  },
  mounted() {
    this.getTeam();
  },
  methods: {
    goUrl(url) {
      window.open(url)
    },
    handleShare(row, type) {
      this.$router.push({ path: `/share`, query: { type: type, id:row.id} });
    },
    handleDelete({ id }) {
      this.$confirm("确认删除该镜像吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          fetchImageDelete({ id }).then(() => {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.$refs.pageContent.queryTblMain();
          });
        })
        .catch(() => { });
    },
    handleEdit(row) {
      this.initParams = {
        title: "编辑镜像",
        row,
        cb: (params) => {
          this.handleConfirm(params);
        },
      };
      this.dialogVisible = true;
    },
    handleConfirm(params) {
      this.btnLoading = true;
      fetchImageEdit(params)
        .then(() => {
          this.dialogVisible = false;
          this.$message.success("操作成功");
          this.$refs.pageContent.queryTblMain();
        })
        .finally(() => {
          this.btnLoading = false;
        });
    },
    getTeam() {
      fetchChannelGetList().then((res) => {
        let resArr = [];
        for (let i = 0; i < res.data.length; i++) {
          resArr.push({
            label: res.data[i].name,
            value: res.data[i].id
          })
        }
        this.searchFormConfig.formItems[0].options = resArr;
        this.channelList = resArr;
        // this.modalFormConfig.formItems[3].options = resArr;
      });
    },
    /* =========================================================== */
    handleSearch() {
      this.$refs.pageContent.queryTblMain();
    },
    handleCreateGoods(row) {
      this.initParams = {
        title: "新增镜像",
        row,
        cb: (params) => {
          this.handleConfirm(params);
        },
      };
      this.dialogVisible = true;
    },


  },
};
</script>

<style lang="scss" scoped>
</style>
